<template>
	<!-- 轮播图 -->
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item v-for="(item,index) in rotateList">
			<view class="swiper-item">
				<image :src="item.url" mode="" style="width: 100%;"></image>
			</view>
		</swiper-item>
	</swiper>

	<!-- 天气预报 -->
	<view class="weather" style="height: 100rpx;border: 1px solid #ccc;margin: 5px; border-radius: 5px;display: flex;justify-content: space-between; padding: 10rpx;align-items: center;
				">
		<view class="icon" style="width: 100rpx;height: 100rpx; ">
			<image style="width: 100%;height: 100%;" :src="'/static/weather/icons/'+ weatherNow.icon +'.svg'" mode="">
			</image>
		</view>
		<view class="text" style="font-size: 50rpx;margin-left: 10px;">
			{{weatherNow.temp}}°C
		</view>
		<view class="text" style="font-size: 34rpx;margin-left: 10rpx;">
			{{weatherNow.text}}
		</view>
		<view class="text" style=" margin-left: 10rpx;">
			{{weatherNow.windDir}} {{weatherNow.windScale}}级
		</view>
		<view>
			<view class="text" style="margin-left: 10rpx;">
				体感温度： {{weatherNow.feelsLike }}°C
			</view>
			<view class="text" style="margin-left: 10rpx;">
				湿度： {{weatherNow.humidity }}%
			</view>
		</view>
	</view>
	
	<view style="color: chocolate;">
		交通线路搜索
	</view>
	<!-- 搜索框 -->
	<uni-search-bar @confirm="searchCityBus" v-model="searchKey" />
	<button type="default" @tap="showme">我的位置</button>
	<button type="default" @tap="hotmovie">热门电影</button>
	<!-- 精选推荐 -->
	<view class="log" style="color: #ff6700; padding-left: 20rpx; font-size: 40rpx; margin-bottom: 10rpx;">景点推荐</view>
	<view class="selected">
		<view class="item" v-for="(item,index) in SelectedList" :key="index" @tap="toDetails(item.objectId)">
			<view class="pic">
				<image :src="item.img" mode=""></image>
			</view>
			<view class="name">{{item.name}}</view>
			<view class="info">{{item.intro}}</view>
		</view>
	</view>


</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from '../../untils/config.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '../../store/userStore.js';
	let store=userStore()
	onLoad(() => {
		// 获取轮播图数据
		getLuinbo()
		// 获取天气数据
		getWeather()
		// 获取精选推荐数据
		getSelected()
		getPos()
	})
	let rotateList = ref([])
	async function getLuinbo() {
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/img")
		console.log(res)
		rotateList.value = res.results
	}

	let searchKey = ref('')

	function searchCityBus() {
		if (searchKey.value == '') {
			uni.showToast({
				title: '请输入城市名称',
				icon: 'none'
			})
			return
		}
		// 跳转到高德地图搜索城市公交
		window.location.href =
			`https://uri.amap.com/line?name=${searchKey.value}&city=029&callnative=1`
	}

	let weatherNow = ref({})
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_now, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location
		})
		if (res.code == 200) {
			weatherNow.value = res.now
			console.log(res.now)
		}
	}

	const SelectedList = ref([])
	async function getSelected() {
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/xianplayitem")
		console.log(res)
		SelectedList.value = res.results
	}


	async function getPos() {
		uni.getLocation({
			success: (res) => {
				console.log(res)
				store.setPos(res.latitude, res.longitude)
			}
		})
	}

	function toDetails(id) {
		uni.navigateTo({
			url: `/pages/Details/Details?id=${id}`
		})
	}
	function showme(){
		uni.navigateTo({
			url:"/pages/mywebView/mywebView?type=1"
		})
	}
	function hotmovie(){
		uni.navigateTo({
			url:"/pages/hotmovie/hotmovie"
		})
	}
</script>

<style lang="scss" scoped>
	.selected {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		.item {
			width: 45%;
			margin-bottom: 20rpx;
			border: 1px solid #ccc;
			border-radius: 10rpx;
			padding: 10rpx;
			box-shadow: 0 0 10rpx #ccc;
			text-align: center;
			.pic {
				width: 100%;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				font-size: 30rpx;
				font-weight: bold;
				margin: 10rpx 0;
			}

			.info {
				font-size: 24rpx;
				/* 为view容器设置其中显示的文本超出2行就显示省略号。 */
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				padding: 0 15rpx 0 15rpx;
			}
		}
	}
</style>